<template>
         
        <div class="good_list">
                    <div class="good_item" v-for="item in list" :key="item.imgid" @click='goDetail(item.imgid)'>

                            <img :src="item.src" alt="">
                            <h2>{{item.title}}</h2>
                            <div>
                              <p class="topP">
                                 <span class="now">$899</span>
                                  <span class="old">$522</span>
                             </p>
                             <p class="bootomP">
                                 <span>热卖中</span>
                                  <span>剩60件</span>   
                             </p>
                             </div>


                    </div>
        </div>



</template>



<script>
export default {
         data:function() {
            return{
                content123:'与你最好的相逢，在10月，炎热的夏暑只剩下老鼠的尾巴，长长细细的，那时的秋风稍稍微凉，咸湿的海风，起伏着你长长的黑裙子。有件事一直想告诉你，你不笑的样子不好看，甚至有点丑的。但是你笑起来那眉尾弯弯的笑意，竟像百花齐放的灿烂。那浅显的酒窝，梨花带水',
                list:[],
                
           }
        },

        created() {
             this.hasimglist() 
        },

        methods: {
          hasimglist() {
                        for(var i = 0;i<8;i++) {
                            if(i%2 == 0) {
                                     this.list.push({title:'乘风破浪',
                             imgid:i,src:"../../images/shuijiao.jpg",
                             })
                            } else {
                             this.list.push({title:'乘风破浪地方撒旦的手法首发发生发射点法大师傅',
                             imgid:i,src:"../../images/muwu.jpg"})
                            }
                        }
                },

            goDetail(index) {
                     // 使用JS的形式进行路由导航

                     // 注意： 一定要区分 this.$route 和 this.$router 这两个对象，
                     // 其中： this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它
                     // 其中： this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址
                    // 1. 最简单的
                     // this.$router.push("/home/goodsinfo/" + index);
                     // 2. 传递对象
                      this.$router.push({ path: "/home/goodsinfo/" + index });
                     // 3. 传递命名的路由
                    // this.$router.push({ name: "goodsinfo", params: { index } }); 
                }
          }
     
}
</script>


<style lang="less" scoped>
    .good_list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
         .good_item {
            background-color: #fff;
            width: 49%;
            justify-content: space-between;
            display: flex;
            flex-direction: column;
            border:1px #ccc solid;  
            padding: 2px;
            img {
                width: 100%;
            }

            h2 {
                font-size: 14px;
                margin-top: 10px;
                margin-bottom: 10px;
            }

             div {
                    padding: 0 5px;
                    background-color: #ccc;

                    .topP {
                        .now {
                                color:red;
                                font-size: 14px;
                                font-weight: bold;
                        }

                        .old {
                                text-decoration: line-through;
                                 font-size: 12px;
                                 margin-left: 10px;
                        }
                    }

                    .bootomP {
                        font-size: 12px;
                        display: flex;
                        justify-content: space-between;
                    }
                    
            }
        }

    }
       

</style>